<template>
    <div class="container-box">
        <div class="stop_car"> 
            {{CONST_NAME.YINGJI_STOP_CAR}}
        </div>
        <div class="huanle_stop"> 
            {{CONST_NAME.HUANLE_STOP_CAR}}
        </div>

        <div class="huanle_stop_shengyu" > 
            {{CONST_NAME.SEHNGYU_NUM}}
        </div>

        <div class="animine_part" @click="showDetail"> 
            {{CONST_NAME.ANIMINE_PART}}
            <jqDialog :showDialog="keyPlace.keyPlaceDialog" :keyPlace="keyPlace" @closeKeyPlace="closeKeyPlace"></jqDialog>
        </div>
        <div class="animine_part_hotel"> 
            {{CONST_NAME.ANIMINE_PART_HOTEL}}
        </div>
        <div class="animine_part_hotel_zong"> 
            {{CONST_NAME.ZONGREN_NUM}}
        </div>
        <div class="animine_part_hotel_shengcar"> 
            {{CONST_NAME.SEHNGYU_CAR_NUM}}
        </div>

        <div class="animine_part_stop"> 
            {{CONST_NAME.ANIMINE_PART_STOP}}
        </div>
        <div class="animine_part_stop_shengyu"> 
            {{CONST_NAME.SEHNGYU_NUM}}
        </div>

        <div class="huanle_center_stop"> 
            {{CONST_NAME.HUANLE_CENTER_STOP}}
        </div>

        <div class="huanle_center_stop_shengyu"> 
            {{CONST_NAME.SEHNGYU_NUM}}
        </div>

        <div class="ruifeng_huanle_hotel"> 
            {{CONST_NAME.RUIFENG_HUANLE_HOTEL}}
        </div>

        <div class="ruifeng_huanle_hotel_zong"> 
            {{CONST_NAME.ZONGREN_NUM}}
        </div>
        <div class="ruifeng_huanle_hotel_shengcar"> 
            {{CONST_NAME.SEHNGYU_CAR_NUM}}
        </div>

        <div class="suidao_stop"> 
            {{CONST_NAME.SUIDAO_STOP}}
        </div>
        
        <!-- <div class="xishui_center" @click="showDetailXi">  -->
        <div class="xishui_center"> 
            {{CONST_NAME.XISHUI_CENTER}}
            <!-- <jqDialog :showDialog="keyPlaceXi.keyPlaceDialog" :keyPlace="keyPlaceXi" @closeKeyPlace="closeKeyPlaceXi"></jqDialog> -->
        </div>
        <div class="xishui_stop_shengyu" > 
            {{CONST_NAME.SEHNGYU_NUM}}
        </div>

        <div class="guzhen" @click="showDetailGu"> 
            {{CONST_NAME.GUZHEN}}
            <jqDialog :showDialog="keyPlaceGu.keyPlaceDialog" :keyPlace="keyPlaceGu" @closeKeyPlace="closeKeyPlaceGu"></jqDialog>
        </div>

        <div class="guzhen_shengcar"> 
            {{CONST_NAME.SEHNGYU_CAR_NUM}}
        </div>

        <div class="ruifeng_guzhen_hotel"> 
            {{CONST_NAME.RUIFENG_GUZHEN_HOTEL}}
        </div>
        <div class="ruifeng_guzhen_hotel_zong"> 
            {{CONST_NAME.ZONGREN_NUM}}
        </div>
        <div class="ruifeng_guzhen_hotel_shengcar"> 
            {{CONST_NAME.SEHNGYU_CAR_NUM}}
        </div>

        <div class="longzhimeng_guzhen_hotel"> 
            {{CONST_NAME.LONGZHIMENG_GUZHEN_HOTEL}}
        </div>
        <div class="longzhimeng_guzhen_hotel_zong"> 
            {{CONST_NAME.ZONGREN_NUM}}
        </div>
        <div class="longzhimeng_guzhen_hotel_shengcar"> 
            {{CONST_NAME.SEHNGYU_CAR_NUM}}
        </div>

        <div class="yashi_hotel"> 
            {{CONST_NAME.YASHI_HOTEL}}
        </div>
        <div class="yashi_hotel_zong"> 
            {{CONST_NAME.ZONGREN_NUM}}
        </div>
        <div class="yashi_hotel_shengcar"> 
            {{CONST_NAME.SEHNGYU_CAR_NUM}}
        </div>

        <div class="yashi_stop"> 
            {{CONST_NAME.YASHI_STOP}}
        </div>
        <div class="yashi_stop_shengyu"> 
            {{CONST_NAME.SEHNGYU_NUM}}
        </div>

        <div class="zuanshi_hotel"> 
            {{CONST_NAME.ZUANSHI_HOTEL}}
        </div>
        <div class="zuanshi_hotel_zong"> 
            {{CONST_NAME.ZONGREN_NUM}}
        </div>
        <div class="zuanshi_hotel_shengcar"> 
            {{CONST_NAME.SEHNGYU_CAR_NUM}}
        </div>

        <div class="zuanshi_stop"> 
            {{CONST_NAME.ZUANSHI_STOP}}
        </div>
        <div class="zuanshi_stop_shengyu"> 
            {{CONST_NAME.SEHNGYU_NUM}}
        </div>
    </div>
</template>

<script>
import { CONST_NAME } from './constname'
import jqDialog from './dialog/jqDialog.vue'

export default {
    components: {
        jqDialog
    },
    props: {
        hotelData: {
            type: Array,
            default: () => {
                return []
            }
        },
        parkData: {
            type: Array,
            default: () => {
                return []
            }
        },
        scenicSpotData: {
            // type: Object,
            // default: () => {
            //     return {}
            // }
        },
        scenicLoadData: {
            // type: Object,
            // default: () => {
            //     return {}
            // }
        },
    },
    created() {
    },
    data() {
        return {
            CONST_NAME: CONST_NAME,
            keyPlace: {
                keyPlaceDialog: false,
                keyPlaceData: {
                    name: '',
                    tolenum: '-',
                }
            },
            keyPlaceXi: {
                keyPlaceDialog: false,
                keyPlaceData: {
                    name: '',
                    tolenum: '-',
                }
            },
            keyPlaceGu: {
                keyPlaceDialog: false,
                keyPlaceData: {
                    name: '',
                    tolenum: '-',
                }
            },
        }
    },
    mounted() {
    },
    destroyed() {
    },
    methods: {
        getItemData(arr, name, value){
            for(var i = 0; i < arr.length; i++) {
                if(arr[i][name] === value) {
                    return arr[i]
                }
            }
        },
        showDetail(){
            let item = this.getItemData(this.scenicLoadData, "jqmc",CONST_NAME.ANIMINE_PART)
            this.keyPlace.keyPlaceData.name = CONST_NAME.ANIMINE_PART
            this.keyPlace.keyPlaceData.tolenum = item.sumtoday
            this.keyPlace.keyPlaceDialog = !this.keyPlace.keyPlaceDialog
            if(this.keyPlace.keyPlaceDialog){
                this.tongShow(0)
            }
        },
        closeKeyPlace(val) {
            this.keyPlace.keyPlaceDialog = val
        },
        showDetailXi(){
            this.keyPlaceXi.keyPlaceData.name = CONST_NAME.XISHUI_CENTER
            this.keyPlaceXi.keyPlaceDialog = !this.keyPlaceXi.keyPlaceDialog
            if(this.keyPlaceXi.keyPlaceDialog){
                this.tongShow(1)
            }
        },
        closeKeyPlaceXi(val) {
            this.keyPlaceXi.keyPlaceDialog = val
        },
        showDetailGu(){
            this.keyPlaceGu.keyPlaceData.name = CONST_NAME.GUZHEN
            this.keyPlaceGu.keyPlaceDialog = !this.keyPlaceGu.keyPlaceDialog 
            if(this.keyPlaceGu.keyPlaceDialog){
                this.tongShow(2)
            }
        },
        closeKeyPlaceGu(val) {
            this.keyPlaceGu.keyPlaceDialog = val
        },
        closeAll(){
            this.closeKeyPlace(false)
            this.closeKeyPlaceXi(false)
            this.closeKeyPlaceGu(false)
        },
        tongShow(num){
            this.closeAll()
            switch(num){
                case 0:
                    this.closeKeyPlace(true)
                    break
                case 1:
                    this.closeKeyPlaceXi(true)
                    break
                case 2:
                    this.closeKeyPlaceGu(true)
                    break
            }
        }
    },

}
</script>

<style lang="less" scoped>
.container-box{
    font-family: MicrosoftYaHei;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #65bfff;
    
    .stop_car{
        top: 189px;
        left: 526px;
        width: 80px;
        height: 21px;
        position: fixed;
    }
    .huanle_stop{
        top: 298px;
        left: 516px;
        width: 112px;
        height: 21px;
        position: fixed;
    }
    .huanle_stop_shengyu{
        top: 330px;
        left: 518px;
        position: fixed;
        width: 33px;
        height: 19px;
        font-size: 14px;
        color: #33a9ff;
    }
    .animine_part{
        top: 419px;
        left: 268px;
        width: 54px;
        height: 24px;
        position: fixed;
        font-size: 18px;
        color: #4df1ff;
        z-index: 2;
    }
    .animine_part_hotel{
        top: 491px;
        left: 337px;
        width: 80px;
        height: 21px;
        position: fixed;

    }
    .animine_part_hotel_zong{
        top: 517px;
        left: 315px;
        width: 42px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .animine_part_hotel_shengcar{
        top: 517px;
        left: 390px;
        width: 56px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .animine_part_stop{
        top: 594px;
        left: 192px;
        width: 112px;
        height: 21px;
        position: fixed;
    }
    .animine_part_stop_shengyu{
        top: 625px;
        left: 192px;
        width: 33px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .huanle_center_stop{
        top: 709px;
        left: 170px;
        width: 112px;
        height: 21px;
        position: fixed;
    }
    .huanle_center_stop_shengyu{
        top: 735px;
        left: 169px;
        position: fixed;
        width: 33px;
        height: 19px;
        font-size: 14px;
        color: #33a9ff;
    }
    .ruifeng_huanle_hotel{
        bottom: 318px;
        left: 326px;
        width: 128px;
        height: 21px;
        position: fixed;
    }
    .ruifeng_huanle_hotel_zong{
        bottom: 286px;
        left: 322px;
        width: 42px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .ruifeng_huanle_hotel_shengcar{
        bottom: 286px;
        left: 397px;
        width: 56px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .suidao_stop{
        bottom: 128px;
        left: 362px;
        width: 80px;
        height: 21px;
        position: fixed;
    }
    .xishui_center{
        bottom: 331px;
        left: 584px;
        width: 96px;
        height: 21px;
        position: fixed;
        font-size: 16px;
        color: #65bfff;
        z-index: 2;
    }
    .xishui_stop_shengyu{
        bottom: 301px;
        left: 583px;
        position: fixed;
        width: 33px;
        height: 19px;
        font-size: 14px;
        color: #33a9ff;
    }
    .guzhen{
        bottom: 373px;
        left: 1096px;
        width: 36px;
        height: 24px;
        position: fixed;
        font-size: 18px;
        color: #4df1ff;
        z-index: 2;
    }
    .guzhen_shengcar{
        bottom: 348px;
        left: 1086px;
        width: 56px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .ruifeng_guzhen_hotel{
        bottom: 170px;
        left: 938px;
        width: 96px;
        height: 21px;
        position: fixed;
    }
    .ruifeng_guzhen_hotel_zong{
        bottom: 147px;
        left: 918px;
        width: 42px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .ruifeng_guzhen_hotel_shengcar{
        bottom: 147px;
        left: 993px;
        width: 56px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .longzhimeng_guzhen_hotel{
        bottom: 170px;
        left: 1145px;
        width: 112px;
        height: 21px;
        position: fixed;
    }
    .longzhimeng_guzhen_hotel_zong{
        bottom: 147px;
        left: 1136px;
        width: 42px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .longzhimeng_guzhen_hotel_shengcar{
        bottom: 147px;
        left: 1211px;
        width: 56px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .yashi_hotel{
        bottom: 220px;
        right: 456px;
        width: 64px;
        height: 21px;
        position: fixed;
    }
    .yashi_hotel_zong{
        bottom: 191px;
        left: 1362px;
        width: 42px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .yashi_hotel_shengcar{
        bottom: 191px;
        left: 1437px;
        width: 56px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .yashi_stop{
        bottom: 331px;
        right: 451px;
        width: 80px;
        height: 21px;
        position: fixed;
    }
    .yashi_stop_shengyu{
        bottom: 301px;
        right: 500px;
        position: fixed;
        width: 33px;
        height: 19px;
        font-size: 14px;
        color: #33a9ff;
    }
    .zuanshi_hotel{
        bottom: 220px;
        right: 266px;
        width: 64px;
        height: 21px;
        position: fixed;
    }
    .zuanshi_hotel_zong{
        bottom: 191px;
        left: 1556px;
        width: 42px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .zuanshi_hotel_shengcar{
        bottom: 191px;
        left: 1631px;
        width: 56px;
        height: 19px;
        position: fixed;
        font-size: 14px;
        color: #33a9ff;
    }
    .zuanshi_stop{
        bottom: 323px;
        right: 269px;
        width: 80px;
        height: 21px;
        position: fixed;
    }
    .zuanshi_stop_shengyu{
        bottom: 295px;
        right: 314px;
        position: fixed;
        width: 33px;
        height: 19px;
        font-size: 14px;
        color: #33a9ff;
    }
}
</style>
